<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>Cmentarze szczecińskie - serwis mobilny</title> 
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
   <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
   <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
</head> 
<body>
<script>
jQuery(document).bind("pagebeforechange",function(e,data) {
	if (typeof data.toPage==="string") {
		var u=jQuery.mobile.path.parseUrl(data.toPage),
         re1=/^#pagePersonDetails/;
		if (u.hash.search(re1)!==-1) {
			showPersonDetails(u,data.options);
			e.preventDefault();
		}
	}
});

jQuery(document).bind("mobileinit",function() {
   jQuery.mobile.dialog.prototype.options.closeBtnText="Zamknij";
});

jQuery(document).ready(function() {
   jQuery("#submit").click(function(){
      jQuery("#notification").text("");
      var formData=jQuery("#formdane").serialize();
      jQuery.ajax({
         type: "GET",
         dataType: "jsonp",
         url: "http://cmentarze.szczecin.pl/cmentarze/api/person_GetList.asp",
         cache: false,
         data: formData,
         success: personListSuccess,
         error: personListError
      });
      return false;
   });
});

function personListSuccess(data,status) {
   var apage=jQuery("#pagePersonList"),
      aheader=apage.children(":jqmData(role=header)"),
      acontent=apage.children(":jqmData(role=content)"),
      markup="<p>"+data.info+"</p><ul data-role='listview' data-inset='true'>",
      cItems=data.items,
      numItems=cItems.length,
      options={};
   for (var i=0;i<numItems;i++) {
      markup+="<li><a href=\"#pagePersonDetails?personid="+cItems[i].personid+"\"><h3>"+cItems[i].nazwisko+", "+cItems[i].imie+"</h3>";
      markup+="<p><strong>Data urodzenia "+cItems[i].dataurodzenia+", data zgonu "+cItems[i].datazgonu+"</strong></p>";
      markup+="<p class=\"ui-li-aside\"><strong>Cmentarz: "+cItems[i].cmentarz+"</strong></p>";
      markup+="</a></li>";
   }
   markup+="</ul>";
   acontent.html(markup);
   apage.page();
   acontent.find(":jqmData(role=listview)").listview();
   //options.dataUrl="http://cmentarze.szczecin.pl/cmentarze/m2/default.asp";
   options.changeHash=false;
   jQuery.mobile.changePage(apage,options);
}

function personListError(data,status) {
   jQuery("#notification").text("Wystąpił błąd: "+data);
}

function showPersonDetails(urlObj,options) {
	var apersonid=urlObj.hash.replace(/.*personid=/,"");
   jQuery.ajax({
      type: "GET",
      dataType: "jsonp",
      url: "http://cmentarze.szczecin.pl/cmentarze/api/person_GetDetails.asp",
      cache: false,
      data: {"personid":apersonid},
      success: personDetailsSuccess,
      error: personDetailsError
   });
}

function personDetailsSuccess(data,status) {
   var apage=jQuery("#pagePersonDetails"),
      aheader=apage.children(":jqmData(role=header)"),
      acontent=apage.children(":jqmData(role=content)"),
      markup="<p>"+data.info+"</p><ul data-role='listview' data-inset='true'>",
      cItems=data.items,
      numItems=cItems.length,
      options={};
   for (var i=0;i<numItems;i++) {
      markup+="<li data-role='list-divider'>"+cItems[i].nazwisko+", "+cItems[i].imie+"</li>"
      markup+="<li>Data urodzenia<p class=\"ui-li-aside\">"+cItems[i].dataurodzenia+"</p></li>";
      markup+="<li>Data zgonu<p class=\"ui-li-aside\">"+cItems[i].datazgonu+"</p></li>";
      markup+="<li>Data pochówku<p class=\"ui-li-aside\">"+cItems[i].datapochowku+"</p></li>";
      markup+="<li>Imię ojca<p class=\"ui-li-aside\">"+cItems[i].imieojca+"</p></li>";
      markup+="<li>Imię matki<p class=\"ui-li-aside\">"+cItems[i].imiematki+"</p></li>";
      markup+="<li>Cmentarz<p class=\"ui-li-aside\">"+cItems[i].cmentarz+"</p></li>";
      markup+="<li>Kwatera<p class=\"ui-li-aside\">"+cItems[i].numerkwatery+"</p></li>";
      markup+="<li>Rząd<p class=\"ui-li-aside\">"+cItems[i].rzad+"</p></li>";
      markup+="<li>Nr grobu<p class=\"ui-li-aside\">"+cItems[i].numergrobu+"</p></li>";
   }
   markup+="</ul>";
   acontent.html(markup);
   apage.page();
   acontent.find(":jqmData(role=listview)").listview();
   //options.dataUrl="http://cmentarze.szczecin.pl/cmentarze/m2/default.asp";
   options.changeHash=false;
   jQuery.mobile.changePage(apage,options);
   
	var apersonid=cItems[0].personid;
   jQuery.ajax({
      type: "GET",
      dataType: "jsonp",
      url: "http://cmentarze.szczecin.pl/cmentarze/api/map_GetViewByPerson.asp",
      cache: false,
      data: {"personid":apersonid},
      success: personMapSuccess,
      error: personMapError
   });
   
}

function personDetailsError(data,status) {
   jQuery("#notification").text("Wystąpił błąd: "+data);
}

function personMapSuccess(data,status) {
   var apage=jQuery("#pagePersonDetails"),
      acontent=apage.children(":jqmData(role=content)"),
      markup="",
      cItems=data.items,
      numItems=cItems.length,
      options={};
   if (numItems>0) {
      markup+="<a id='linkmap1url' data-ajax='false' data-role='button' href='"+cItems[0].map1url+"'>Widok cmentarza</a>";
      markup+="<a id='linkmap2url' data-ajax='false' data-role='button' href='"+cItems[0].map2url+"'>Dojście do kwatery</a>";
      markup+="<a id='linkmap3url' data-ajax='false' data-role='button' href='"+cItems[0].map3url+"'>Widok kwatery</a>";
      acontent.append(markup);
      jQuery("#linkmap1url").button();
      jQuery("#linkmap2url").button();
      jQuery("#linkmap3url").button();
   }
}

function personMapError(data,status) {
   jQuery("#notification").text("Wystąpił błąd: "+data);
}
</script>

    <div data-role="page" data-title="Cmentarze szczecińskie - wyszukiwarka" id="pageMain" data-theme="b">
        <div data-role="header">
            <h1>Cmentarze szczecińskie - wyszukiwarka</h1>
            <a href="#pageMain" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Strona główna</a>
        </div>
        <div data-role="content">
            <form id="formdane">
               <div data-role="fieldcontain">
                  <div data-role="fieldcontain">
                      <label for="fsurname">Nazwisko:</label><input type="search" name="fsurname" id="fsurname" value="" />
                  </div>
                  <div data-role="fieldcontain">
                      <label for="fname">Imię:</label><input type="search" name="fname" id="fname" value="" />
                  </div>
                  <div data-role="fieldcontain">
                      <label for="fdatebirth">Data urodzenia (rrrr-mm-dd):</label><input type="search" name="fdatebirth" id="fdatebirth" value="" />
                  </div>
                  <div data-role="fieldcontain">
                      <label for="fdatedecease">Data zgonu (rrrr-mm-dd):</label><input type="search" name="fdatedecease" id="fdatedecease" value="" />
                  </div>
                  <h3 id="notification"></h3>
                  <button id="submit" type="submit">Szukaj</button>
               </div>
            </form>
        </div>
        <div data-role="footer">
            <h1>&copy; 2011 Urząd Miasta Szczecin</h1>
        </div>
    </div>
    
    <div data-role="page" id="pagePersonList" data-theme="b" data-title="Wyniki wyszukiwania">
        <div data-role="header">
            <h1>Wyniki wyszukiwania</h1>
            <a href="#pageMain" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Strona główna</a>
        </div>
        <div data-role="content">
        </div>
        <div data-role="footer">
            <h1>&copy; 2011 Urząd Miasta Szczecin</h1>
        </div>
    </div>

    <div data-role="page" id="pagePersonDetails" data-theme="b" data-title="Informacje o zmarłym">
        <div data-role="header">
            <h1>Informacje o zmarłym</h1>
            <a href="#pageMain" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Strona główna</a>
        </div>
        <div data-role="content">
        </div>
        <div data-role="footer">
            <h1>&copy; 2011 Urząd Miasta Szczecin</h1>
        </div>
    </div>
    
</body>
</html>